<template>
    <div>
        <el-from>
            <el-from-item label="兄弟组件child发来消息：">
                <el-input v-model="msgFromChild"></el-input>
            </el-from-item>
            <el-alert :title="msgFromChild"></el-alert>
            <el-from-item title="待办事项：">
                <el-input v-model="text"></el-input>
            </el-from-item>
            <el-from-item>
                <el-button type="" @click="clearInput">清空</el-button>
                <el-button type="primary" @click="submit('toList',text)" >提交</el-button>
                <el-button type="danger" @click="$emit('removeAll')">重置清单</el-button>
            </el-from-item>
        </el-from>
    </div>
</template>

<script>
import { onMounted, ref } from 'vue'
import bus from 'vue3-eventbus'
export default {
    name: 'ToDo',
    props: {
        
    },
    setup(props,cxt) {
        const text = ref("")
        const msgFromChild = ref("")
        
        const clearInput=function(){
            text.value=""
        }
        const submit=function(){
            cxt.emit('toList',text.value),
            text.value=""
        }
        onMounted(()=>{
            bus.on('getMsg',(value)=>{
                msgFromChild.value=value
                text.value=""
            })
        })
        return {
            text,
            clearInput,
            submit,
            msgFromChild

        }
    }
}

</script>
<style scoped></style>
